<template>
  <div class="fee-manager" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="filter-area">
      <el-row>
        <el-col :span="6">
          <div class="filter-item">
            <div class="item-content">
              网点编码：
            </div>
            <div class="item-input">
              <el-input size="small" v-model="input_shopCode" placeholder="请输入网点编码"></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <el-date-picker
              v-model="input_month"
              type="month"
              size="small"
              format="yyyy-MM"
              placeholder="选择月"
              @change="handleSelectMonth"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
        </el-col>
        <el-col :span="2" :offset="8">
          <el-button size="small" type="warning" @click="handleClickManualCheck">检核重审</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="content-fee">
      <div>
        <el-row justify="space-around">
          <el-col :span="7">
            <div class="shop-info-card">
              <div class="card-title">
                网点信息
              </div>
              <div class="desc-item single-line">
                <div>客户名称：</div><span class="single-line">{{shop_name}}</span>
              </div>
              <div class="desc-item">
                陈列星级：<span style="color: #F2BB4A">{{shop_star__c}}</span>
              </div>
              <div class="desc-item">
                所属业代：<span>{{shop_relevant_team__r}}</span>
              </div>
              <div class="desc-item">
                门店标签：
                <span>
                  <span style="margin-left: 10px" v-if="shop_if_device__c"><el-tag size="small" type="success">设备店</el-tag></span>
                  <span style="margin-left: 10px" v-if="shop_if_device__c==false"><el-tag size="small" type="danger">非设备店</el-tag></span>
                  <span style="margin-left: 10px" v-if="shop_paid_store"><el-tag size="small" type="success">费用店设备店</el-tag></span>
                  <span style="margin-left: 10px" v-if="shop_paid_store==false"><el-tag size="small" type="danger">非费用店</el-tag></span>
                </span>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="shop-info-card">
              <div class="card-title">
                分销数据
                <div class="percent red">
                  <i class="el-icon-coin"></i>
                  费率{{monthly_sales_count__c==0?100:(field_9bW10__c*100/monthly_sales_count__c).toFixed(1)}}%
                </div>
              </div>
              <div class="card-content">
                <div class="card-left">
                  <div class="desc-item">
                    费用申请箱数：<span>{{field_9bW10__c}}</span>
                  </div>
                  <div class="desc-item">
                    当月分销箱数：<span>{{monthly_sales_count__c}}</span>
                  </div>
                  <div class="desc-item">
                    实际可发放箱数：<span>{{monthly_fee_box_actual_count__c}}</span>
                  </div>
                  <div class="desc-item">
                    实际可发放金额：<span>{{monthly_fee_actual_amount__c}}</span>
                  </div>
                </div>
                <div class="card-right">
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="shop-info-card">
              <div class="card-title">
                费用详情
                <div class="percent red">
                  <i class="el-icon-warning-outline"></i>
<!--                  提示文字-->
                </div>
              </div>
              <div class="card-content">
                <div class="card-left" style="width: 100%">
                  <div class="desc-item single-line">
                    <div>参与活动：</div><span class="single-line">{{activity_name__c}}</span>
                  </div>
                  <div class="desc-item">
                    当月举证：<span :class="proven__c<2?'backgroud-red':''">{{proven__c}} 次</span>
                  </div>
                  <div class="desc-item">
                    举证达标：<span :class="qualified_proof_count__c<2?'backgroud-red':''">{{qualified_proof_count__c}} 次</span>
                  </div>
                  <div class="desc-item">
                    查证电话：<span>{{shop_contact_name__c}} {{shop_contact_phone__c}}</span>
                  </div>
                </div>
                <div class="card-right">
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="shop-info-card">
              <div class="card-title">
                审核情况
                <div class="percent red">
                  <i class="el-icon-warning-outline"></i>
                  <!--                  提示文字-->
                </div>
              </div>
              <div class="card-content">
                <div class="card-left">
                  <div class="desc-item single-line" style="width: 100%">
                    需要人工检核：<span :class="Manual_check_if__c?'backgroud-red':''">{{Manual_check_if__c==false?"否":"是"}}</span>
                  </div>
                  <div class="desc-item">
                    是否已检核：<span :class="field_2B1Il__c=='c632DT05L'?'backgroud-green':'backgroud-red'">{{field_2B1Il__c=="c632DT05L"?"是":"否"}}</span>
                  </div>
                  <div class="desc-item">
                    已发起签收：<span>{{is_receipt_sent__c==false?"否":"是"}}</span>
                  </div>
                  <div class="desc-item">
                    <div>检核备注：</div><span>{{field_y1vt9__c}}</span>
                  </div>
                </div>
                <div class="card-right">
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="24">
            <div class="shop-info-card">
              <div class="card-title">
                陈列形式
              </div>
              <div style="margin-top: 10px">
                <vxe-table
                    ref="typeTable"
                    :row-config="{isHover: true}"
                    align="center"
                    :data="typeList">
                  <vxe-column field="activity_item_id__r" title="陈列形式"></vxe-column>
                  <vxe-column field="field_ukLIt__c" title="陈列层数"></vxe-column>
                  <vxe-column field="field_xMB8r__c" title="SKU数"></vxe-column>
                  <vxe-column field="field_s2Kn1__c" title="陈列排面数"></vxe-column>
                  <vxe-column field="field_ik1o2__c" title="每月费用上限"></vxe-column>
                  <vxe-column field="field_39DS3__c" title="陈列说明"></vxe-column>
                </vxe-table>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div style="min-height: 300px" class="shop-info-card" v-infinite-scroll="loadMore">
              <div class="card-title">
                陈列照片
              </div>
              <div class="content-area">
                <el-empty v-if="feedPathList.length==0" style="margin-top: 0px" description="拜访图片为空"></el-empty>
                <el-row style="margin-top: 20px">
                  <el-col :span="4" v-for="(feedPath,index) in feedPathList" :key="index" >
                    <div class="feed-item">
                      <el-image fit="cover" style="width: 98%; height: 300px;border-radius: 4px" :src="url_path+feedPath['path']"
                                :preview-src-list="[url_path+feedPath['path']]"/>
                      <div class="item-mask">
                        <p>{{ feedPath["label"] }}</p>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog
        title="检核重审"
        :visible.sync="dialogVisible"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
    >
      <span>当月举证达标</span>
      <multiselect
          style="margin-top: 10px"
          v-model="is_verified"
          :options="verify_options"
          :allowEmpty = "false"
          selectLabel=""
          deselectLabel=""
          placeholder=""
          selectedLabel="已选中"
          :optionHeight="32"
          @select="handleSelectIsVerified"
      ></multiselect>
      <span style="margin-top: 20px; display: block">人工调节发放箱数</span>
      <el-input style="margin-top: 10px" v-model="verify_num" placeholder="请输入数字" type="number"></el-input>
      <span style="margin-top: 20px; display: block">检核备注</span>
      <el-input
          style="margin-top: 10px"
          type="textarea"
          :rows="4"
          :maxlength="2000"
          :show-word-limit = "true"
          placeholder="请输入检核备注"
          v-model="verify_mark">
      </el-input>
      <span style="margin-top: 10px; display: block">※常用检核备注快速选择</span>
      <multiselect
          style="margin-top: 10px"
          v-model="verify_mark_choose"
          :options="verify_options_mark"
          :allowEmpty = "false"
          selectLabel=""
          deselectLabel=""
          placeholder=""
          selectedLabel="已选中"
          @select="handleSelectVerifyMark"
          :optionHeight="32"
      ></multiselect>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="handleSubmitVerify">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  api_getShopDetailsByShopCode,
  api_getFeeDetailsByShopCodeAndMonth,
  api_getActivityTypeList,
  api_getCheckInSearchResult,
  api_sendFeeVerify
} from '../api'
import {getMemberIDByName} from "../tools";
import Multiselect from 'vue-multiselect'
const url_path = "https://www.fxiaoke.com/FSC/EM/File/GetByPath?path="

export default {
  name: "fee-manager",
  components: {
    Multiselect
  },
  data: function () {
    return {
      url_path,
      fullscreenLoading: false,
      dialogVisible: false, //陈列检核弹窗
      feedPathList: [],
      page: 1,
      hasMore: true,
      input_shopCode: "",
      input_month: "",
      input_startTime: "",
      input_endTime: "",
      shop_star__c: "暂无", // 陈列星级
      shop_account_no: "", // 网点编码
      shop_name: "暂无", // 网点名称
      shop_contact_name__c: "", // 网点联系人
      shop_contact_phone__c: "暂无", // 网点联系方式
      shop_dealer_id__r: "", // 网点所属经销商
      shop_field_53l7l__c: "", // 网点属性
      shop_relevant_team__r: "暂无", // 网点所属人
      shop_paid_store: false, // 网点是否为费用门店
      shop_if_device__c: false, // 网点是否为设备网点
      Manual_check_if__c: false, // 是否需要人工检核
      field_2B1Il__c: false, // 是否已检核
      is_receipt_sent__c: false, // 是否已发起签收
      field_y1vt9__c: "暂无", // 检核备注
      clos_state__c: "", // 结案状态
      activity_name__c: "暂无", //活动名称
      monthly_sales_count__c: 0, // 本月销售数量
      field_9bW10__c: 0, // 当月申请费用箱数
      monthly_fee_box_actual_count__c: 0, // 当月实际可发放箱数
      monthly_fee_actual_amount__c: 0, // 当月实际可发放费用
      proven__c: 0,//当月举证次数
      qualified_proof_count__c: 0, //举证达标次数
      activity_agreement_id__c__relation_ids: "", //陈列协议id
      verify_id: "",
      typeList: [{
        activity_item_id__r: "1", //陈列形式
        field_ukLIt__c: "2", // 陈列层数
        field_xMB8r__c: "3", // SKU数
        field_s2Kn1__c: "4", // 陈列排面数
        field_ik1o2__c: "5", // 每月费用上限
        field_39DS3__c: "" // 陈列说明
      }],
      is_verified: "否",
      verify_num: 0,
      verify_mark: "",
      verify_mark_choose: "", // 陈列检核选项
      verify_options: ["否", "是"],
      verify_options_mark: [
          "全部核销——举证达标",
          "全部核销——割箱&堆头陈列",
          "全部核销——已报备",
          "部分核销——费率超标",
          "部分核销——陈列部分达标",
          "部分核销——举证次数不足",
          "不予核销——零分销",
          "不予核销——陈列均未达标",
          "不予核销——虚假陈列",
          "不予核销——付费陈列中包含他司产品"
      ]
    }
  },
  watch:{
    Manual_check_if__c: function (){
      if(this.Manual_check_if__c){
        this.is_verified = "是"
      }else{
        this.is_verified = "否"
        this.verify_num = 0
      }
    },
    field_9bW10__c: function (){// 当月可发放箱数
      this.verify_num = this.field_9bW10__c;
    },
    field_y1vt9__c: function (){// 检核备注
      this.verify_mark = this.field_y1vt9__c;
    }

  },
  methods:{
    handleSelectIsVerified(value){
      this.is_verified = value;
      if(this.is_verified == "否"){
        this.verify_num = 0
      }else{
        this.verify_num = this.field_9bW10__c
      }
    },
    handleSelectVerifyMark(value){
      this.verify_mark_choose = value;
      this.verify_mark = this.verify_mark_choose;
    },
    handleSelectMonth(){
      const _this = this;
      let currentMonth = _this.input_month.getMonth();
      _this.input_startTime = Math.round(_this.input_month);
      let nextMonth=++currentMonth;
      _this.input_endTime = Math.round(new Date(_this.input_month.getFullYear(),nextMonth,1));
      console.log(_this.input_startTime, _this.input_endTime)
    },
    handleClickManualCheck(){
      const _this = this;
      if(_this.verify_id !== ""){
        if(_this.is_verified == "否"){
          _this.verify_num = 0
        }else{
          _this.verify_num = _this.field_9bW10__c
        }
        _this.dialogVisible = true;
        _this.verify_mark_choose = "";

      }else{
        _this.$message({
          showClose: true,
          message: '还未获取陈列详情！',
          type: 'error'
        });
      }
    },
    async handleSubmitVerify(){
      const _this = this;
      console.log("当月举证达标：", _this.is_verified,"  人工调解发放箱数：", _this.verify_num, "  检核备注：", _this.verify_mark);
      let _is_verified = false
      if(_this.is_verified == "是"){ _is_verified = true }
      await api_sendFeeVerify( _this.verify_id, _is_verified, _this.verify_num, _this.verify_mark).then(res=>{
        _this.dialogVisible = false
        if(res == -1){
          _this.$message({
            showClose: true,
            message: '陈列检核失败，请稍候再试！',
            type: 'error'
          });
        }else{
          _this.$message({
            showClose: true,
            message: '陈列检核成功！',
            type: 'success'
          });
        }
      })
      setTimeout(() => {
        _this.$emit("refreshShopList", "")
        // 获取活动协议信息
        api_getFeeDetailsByShopCodeAndMonth(_this.input_shopCode, _this.input_month.getMonth()+1).then(res=>{
          if(res.length == 0){
            _this.activity_name__c = "暂未添加活动协议"
            _this.proven__c = 0;
            _this.qualified_proof_count__c = 0;
            _this.monthly_sales_count__c = 0;
            _this.field_9bW10__c = 0;
            _this.activity_agreement_id__c__relation_ids = "";
            _this.monthly_fee_box_actual_count__c = 0;
            _this.monthly_fee_actual_amount__c = 0;
            _this.verify_id = "";
          }else{
            _this.activity_name__c = res["activity_name__c"]
            _this.proven__c = res["proven__c"]
            _this.qualified_proof_count__c = res["qualified_proof_count__c"]
            _this.monthly_sales_count__c = res["monthly_sales_count__c"]==undefined?0:Number(res["monthly_sales_count__c"])
            _this.field_9bW10__c = res["field_9bW10__c"]==undefined?0:Number(res["field_9bW10__c"])
            _this.activity_agreement_id__c__relation_ids = res["activity_agreement_id__c__relation_ids"]
            _this.Manual_check_if__c = res["Manual_check_if__c"]
            _this.field_2B1Il__c = res["field_2B1Il__c"]
            _this.is_receipt_sent__c = res["is_receipt_sent__c"]
            _this.field_y1vt9__c = res["field_y1vt9__c"]
            _this.monthly_fee_box_actual_count__c = res["monthly_fee_box_actual_count__c"]
            _this.monthly_fee_actual_amount__c = res["monthly_fee_actual_amount__c"]
            _this.verify_id = res["_id"]
            console.log("activity_agreement_id__c__relation_ids---------->",_this.activity_agreement_id__c__relation_ids)
          }
        })
      }, 3000);
    },
    async handleSearch(){
      if(this.input_shopCode==""){//初始化
        return;
      }
      const _this = this;
      _this.feedPathList = [];
      _this.fullscreenLoading = true;
      _this.page = 1;
      _this.hasMore = true;
      console.log("搜索网点费用信息------------>", _this.input_shopCode, _this.input_month);
      // 获取网点信息
      await api_getShopDetailsByShopCode(_this.input_shopCode).then(res=>{
        console.log("created----->", res);
        if(res.length == 0){
          _this.shop_name = "暂无";
          _this.shop_relevant_team__r = "暂无";
          _this.shop_if_device__c = "暂无";
          _this.shop_paid_store = "暂无";
          _this.shop_contact_name__c = "暂无";
          _this.shop_contact_phone__c = "暂无";
          return;
        }
        if(res["star__c"] != "-"){
          let tmp = "";
          let num = Number(res["star__c"]);
          for(var index=0 ; index < num ; index++){tmp+="★"}
          _this.shop_star__c = tmp;
        }else{_this.shop_star__c = res["star__c"];}
        _this.shop_name = res["name"];
        _this.shop_relevant_team__r = res["relevant_team__r"];
        _this.shop_if_device__c = res["if_device__c"];
        _this.shop_paid_store = res["paid_store"];
        _this.shop_contact_name__c = res["contact_name__c"];
        _this.shop_contact_phone__c = res["contact_phone__c"];
      });
      // 获取活动协议信息
      await api_getFeeDetailsByShopCodeAndMonth(_this.input_shopCode, _this.input_month.getMonth()+1).then(res=>{
        if(res.length == 0){
          _this.activity_name__c = "暂未添加活动协议"
          _this.proven__c = 0;
          _this.qualified_proof_count__c = 0;
          _this.monthly_sales_count__c = 0;
          _this.field_9bW10__c = 0;
          _this.activity_agreement_id__c__relation_ids = "";
          _this.monthly_fee_box_actual_count__c = 0;
          _this.monthly_fee_actual_amount__c = 0;
          _this.verify_id = "";

        }else{
          _this.activity_name__c = res["activity_name__c"]
          _this.proven__c = res["proven__c"]
          _this.qualified_proof_count__c = res["qualified_proof_count__c"]
          _this.monthly_sales_count__c = res["monthly_sales_count__c"]==undefined?0:Number(res["monthly_sales_count__c"])
          _this.field_9bW10__c = res["field_9bW10__c"]==undefined?0:Number(res["field_9bW10__c"])
          _this.activity_agreement_id__c__relation_ids = res["activity_agreement_id__c__relation_ids"]
          _this.Manual_check_if__c = res["Manual_check_if__c"]
          _this.field_2B1Il__c = res["field_2B1Il__c"]
          _this.is_receipt_sent__c = res["is_receipt_sent__c"]
          _this.field_y1vt9__c = res["field_y1vt9__c"]
          _this.monthly_fee_box_actual_count__c = res["monthly_fee_box_actual_count__c"]
          _this.monthly_fee_actual_amount__c = res["monthly_fee_actual_amount__c"]
          _this.verify_id = res["_id"]
          console.log("activity_agreement_id__c__relation_ids---------->",_this.activity_agreement_id__c__relation_ids)
        }
      })
      // 获取活动陈列类型
      api_getActivityTypeList(_this.activity_agreement_id__c__relation_ids).then(res=>{
        console.log("api_getActivityTypeList--------->", res)
        _this.typeList = res;
      })
      _this.fetchPicListByPage();
    },
    fetchPicListByPage(){
      const _this = this;
      let memberID = ""
      _this.fullscreenLoading = true;
      api_getCheckInSearchResult(memberID, _this.input_shopCode,_this.input_startTime,_this.input_endTime,_this.page).then(res => {
        if (res != undefined) {
          _this.feedPathList = _this.feedPathList.concat(res);
        }
        if(res.length==0){
          _this.hasMore = false;
        }
        _this.fullscreenLoading = false;
        _this.page = _this.page + 1;
        console.log("_this.feedPathList----->", _this.feedPathList)
      })
    },
    loadMore() {
      const _this = this;
      if( _this.feedPathList.length > 0 && _this.fullscreenLoading == false && _this.hasMore){
        console.log("loadMore------------------>>>>>>>>>>");
        _this.fetchPicListByPage();
      }
      if(!_this.hasMore){
        console.log("没有更多了------------------>>>>>>>>>>");
      }
    }
  },
  created() {
    const _this = this;
    _this.typeList = [];
    _this.input_month = new Date();
    _this.handleSelectMonth();
    _this.handleSearch()
  }
}
</script>
<style scoped lang="less">
.fee-manager {
  width: 100%;
  min-width: 923px;
  background-color: #F4F4F4;
}

.filter-area {
  padding: 10px;
  min-width: 923px;
  top: 0;
  z-index: 99;
  background-color: #FFFFFF;
  height: 28px;
  box-shadow: 0 3px 10px 0 rgb(31 35 41 / 4%);
}

.filter-item {
  display: flex;
  height: 32px;

  .item-content {
    line-height: 32px;
    font-weight: 600;
    min-width: 60px;
  }

  .item-input {
  }
  height: 32px;
}
.content-fee {
  min-width: 923px;
  margin: 10px 10px 0 10px;
  background-color: #F4F4F4;
  min-height: calc(100vh - 59px);
}
.shop-info-card {
  margin: 5px;
  background-color: #FFFFFF;
  box-shadow: 0 3px 10px 0 rgb(31 35 41 / 4%);
  transition:box-shadow .3s ease-in-out;
  padding: 10px;
  border-radius: 4px;
}
.card-content {
  .card-left{
  }
}
.card-title{
  font-size: 16px;
  font-weight: 600;
  display: flex;
}
.desc-item {
  margin-top: 10px;
  font-size: 14px;
  color: #848F97;
  display: flex;
  flex-direction: row;
  div {
    min-width: 70px;
  }
  span {
    margin-left: auto;
    display: block;
    color: #3e3e33;
    float: right;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .desc-item-number {
    font-size: 35px;
  }
}
.percent {
  margin-left: auto;
  font-size: 14px;
  font-weight: 400;
}
.green {
  color:#5ECC3E
}
.red {
  color:#D0302A;
}
.backgroud-red{
  background-color: #DD5B3D !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  padding: 0 4px 0 4px;
}
.backgroud-green{
  background-color: #5ECC3E !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
  padding: 0 4px 0 4px;
}
.feed-item {
  position: relative;

  .item-mask {
    position: absolute;
    height: 40px;
    background-color: rgba(0, 0, 0, .8);
    right: 2%;
    top: 0;
    color: #ffffff;

    p {
      line-height: 32px;
      padding: 4px;
    }
  }
}
</style>
